<template>
  <div id="ckeditor">
    <ckeditor v-model="data" :editor="editor" :config="editorConfig"></ckeditor>
  </div>
</template>

<script setup name="editor">
  import CKEditor from "@ckeditor/ckeditor5-vue"
  import ClassicEditor from "zxf5115-ckeditor"
  import 'zxf5115-ckeditor/translations/zh-cn.js'

  import { useStore } from "@/hooks/store/useStore"

  const { base } = useStore()

  const props = defineProps({
    content: {
      type: String,
      default: null,
    }
  });

  const data = ref('')

  const ckeditor = CKEditor.component;
  const editor = ClassicEditor;
  const editorConfig = reactive({
    language: 'zh-cn',
    placeholder: '',
    toolbar: {
      items: [
        'undo',
        'redo',
        '|',
        'fontFamily',
        'fontSize',
        'fontColor',
        'fontBackgroundColor',
        'highlight',
        'bold',
        'italic',
        'underline',
        '|',
        {
          label: '文字',
          icon: false,
          items: [
            'heading',
            'strikethrough',
            'superscript',
            'subscript',
          ]
        },
        '|',
        {
          label: '插入',
          icon: false,
          items: [
            'insertTable',
            'imageUpload',
            'blockQuote',
            'link',
            'mediaEmbed',
            'code',
            'codeBlock',
            'htmlEmbed',
            'horizontalLine',
          ]
        },
        '|',
        {
          label: '列表',
          icon: false,
          items: [ 'bulletedList', 'numberedList', 'todoList' ]
        },
        '|',
        {
          label: '位置',
          icon: false,
          items: [ 'outdent', 'indent', 'alignment' ]
        },
      ],
      shouldNotGroupWhenFull: true
    },
    //设置字体大小
    fontSize: {
      options: [ 12, 14, 16, 18, 20, 22, 24 ],
      supportAllValues: true
    },
    htmlEmbed: {
      showPreviews: true
    },
    simpleUpload: {
      uploadUrl: $http.adornUrl('/file/editor_picture'), // 上传图片接口
      headers: {
          Authorization: 'Bearer ' + base.token,
      }
    }
  })


  // 初始化内容
  watch(() => props.content, (value, oldValue) => {
    data.value = value
  })


  // 使用defineExpose暴露content
  defineExpose({
    data
  });

</script>

<style>
  #ckeditor {
    width: 800px;

    .ck-editor__editable {
      min-height: 300px;
      border: 1px solid #b3b3b3;
    }
  }
</style>
